<template>
  <div class="align-play card-page">
    <div class="section-one">
      <h3>居中对齐</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content">
            <div class="title">absolute，固定宽高</div>
            <div class="case-cont">
              <div class="demo1"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div class="title">absolute，可不固定宽高</div>
            <div class="case-cont">
              <div class="demo2">
                <div>第一行</div>
                <div>第二行第二行</div>
                <div>第三行</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <div class="title">flex布局，可不固定宽高</div>
            <div class="case-cont demo3-wrap">
              <div class="demo3">
                <div>第一行</div>
                <div>第二行第二行</div>
                <div>第三行</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content">
            <div class="title">非block元素水平居中</div>
            <div class="case-cont demo4-wrap">
              <div class="demo4"></div>
              <div class="demo4"></div>
              <div class="demo4"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content">
            <div class="title">非block元素水平垂直居中，可不固定宽高</div>
            <div class="case-cont cards-wrap">
              <div class="card-item">
                <div class="card-title">
                  <img class="card-title-img"
                    src="@/assets/image/icon/sjzt-icon.png"
                    alt="">
                  <div class="card-title-label">数据中台</div>
                </div>
                <div class="card-text">统一数据底座，共享数据</div>
              </div>
              <div class="card-item">
                <div class="card-title">
                  <img class="card-title-img"
                    src="@/assets/image/icon/sjzt-icon.png"
                    alt="">
                  <div class="card-title-label">数据中台</div>
                </div>
                <div class="card-text">统一数据底座，共享数据</div>
              </div>
              <div class="card-item">
                <div class="card-title">
                  <img class="card-title-img"
                    src="@/assets/image/icon/sjzt-icon.png"
                    alt="">
                  <div class="card-title-label">数据中台</div>
                </div>
                <div class="card-text">统一数据底座，共享数据</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="section-two">
      <h3>flex布局</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content flex-box">
            <div>flex-center剧中，不用管宽高</div>
          </div>
          <h4>有关flex:1</h4>
          <p>flex属性是flex-grow,flex-shrink,flex-basis三个属性的简写，默认值为0 1 auto。</p>
          <div>flex: auto; ===> (1 1 aut0) </div>
          <div>===> flex-grow: 1; flex-shrink: 1; flex-basis: auto</div>
          <div>flex: none; ===> (0 0 auto)</div>
          <div>flex: 1; ===> (1 1 0%)</div>
          <br />
          <div>flex-grow: 0 如果存在剩余空间，也不放大</div>
          <div>flex-grow: 1 所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。</div>
          <div>flex-grow: 2 其他项目都为1，设置为2的比其他多一倍。</div>
          <br />
          <div>flex-shrink：1 如果空间不足，该项目将缩小。若所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。</div>
          <div>flex-shrink：0 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</div>
          <br />
          <div>flex-basis： 属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。</div>
          <div>它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。</div>
          <h4>由右边一系列测试可以看出</h4>
          <p>中文不管在flex1下还是定宽下都会超出自动换行，字母不能自动换行。</p>
          <p>在flex下，width，flex-basis设定的宽度都不是准确的宽度，容器会被自己内部超出不换行的元素撑大。内部都是自动换行的元素，也会被隔壁容器挤压空间。</p>
          <p>在flex下，自身容器被旁边超宽容器挤压的规律：</p>
          <div>有不自动换行元素不管是定宽还是flex1，优先占据空间，挤压自动换行或者滚动的元素。</div>
          <h4>总结：</h4>
          <p>不要用flex做三列布局，没法保证容器始终自适应的三等份。</p>
        </el-col>
        <el-col :span="8">
          <p>测试flex两列布局</p>
          <div class="flex-box2">
            <div class="flex-left">我是左边width为200px</div>
            <div class="flex-right"></div>
          </div>
          <p>测试flex三列布局1&nbsp;&nbsp;l:200,m:f1,r:f1&nbsp;&nbsp;中间为能自动换行的中文</p>
          <div class="flex-box3">
            <div class="flex-l">我是左边width为200px</div>
            <div class="flex-m">我是flex三列时中间超长的那部分</div>
            <div class="flex-r"></div>
          </div>
          <p>测试flex三列布局1-2&nbsp;&nbsp;l:200,m:f1,r:f1&nbsp;&nbsp;中有不能自动换行的英文</p>
          <div class="flex-box3">
            <div class="flex-l"></div>
            <!-- <div class="flex-l">我是左边width为200px</div> -->
            <!-- <div class="flex-m">mmmmmmmmmmmmmmmmmbbbbbbbbbbbbbb</div> -->
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r">我是右边有文字的框框</div>
          </div>
          <p>测试flex三列布局1-3&nbsp;&nbsp;l:200,m:f1,r:f1&nbsp;&nbsp;中右有不能自动换行的英文</p>
          <div>l:200,m:felx1,r:flex1</div>
          <div class="flex-box3">
            <div class="flex-l">我是左边width为200px</div>
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r">bbbbbbaaa</div>
          </div>
          <p>测试flex三列布局2&nbsp;&nbsp;l:200,m:200,r:f1&nbsp;&nbsp;中间有不能自动换行的英文</p>
          <div class="flex-box4">
            <div class="flex-l">我是左边width为200px</div>
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r"></div>
          </div>
          <p>测试flex三列布局2-2&nbsp;&nbsp;l:200,m:200,r:f1&nbsp;&nbsp;中右有不能自动换行的英文</p>
          <div class="flex-box4">
            <div class="flex-l">我是左边width为200px</div>
            <div class="flex-m">我是flex三列时中间超长的那部分</div>
            <!-- <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div> -->
            <div class="flex-r">bbbbbbbbbbbbbaaaaaaaaa</div>
          </div>
        </el-col>
        <el-col :span="8">
          <p>测试flex三列布局2-3&nbsp;&nbsp;l:200,m:200,r:f1&nbsp;&nbsp;左中右有不能自动换行的英文</p>
          <div class="flex-box4">
            <div class="flex-l">cccccccccddddddddddddd</div>
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r">bbbbbbbbbbbbbaaaaaaaaa</div>
          </div>
          <p>测试flex三列布局2-4&nbsp;&nbsp;l:200,m:200,r:f1&nbsp;&nbsp;左中右有不能自动换行的英文&nbsp;&nbsp;左加了超出滚动</p>
          <div class="flex-box5">
            <div class="flex-l">cccccccccddddddddddddd</div>
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r">bbbbbbbbbbbbbaaaaaaaaa</div>
          </div>
          <p>测试flex三列布局3&nbsp;&nbsp;l:200,m:200,r:200&nbsp;&nbsp;中右有不能自动换行的英文</p>
          <div class="flex-box6">
            <div class="flex-l">cccccccccdddddddddddd</div>
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r">bbbbbbbbbbbbbaaaaaaaaa</div>
          </div>
          <p>测试flex三列布局3-2&nbsp;&nbsp;l:200,m:200,r:200&nbsp;&nbsp;左中右有不能自动换行的英文&nbsp;&nbsp;右加了超出隐藏</p>
          <div class="flex-box7">
            <div class="flex-l">cccccccccddddddddddddd</div>
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r">bbbbbbbbbbbbbaaaaaaaaa</div>
          </div>
          <p>测试flex三列布局4&nbsp;&nbsp;l:200,m:200,r设置flex-grow:0;flex-shrink: 0;flex-basis:200px</p>
          <div class="flex-box8">
            <div class="flex-l">cccccccccddddddddddddd</div>
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r">bbbbbbbbbbbbbaaaaaaaaa</div>
          </div>
          <p>测试不用flex的三列布局&nbsp;&nbsp;用inline-block</p>
          <div class="flex-box9">
            <div class="flex-l">cccccccccddddddddddddd</div>
            <div class="flex-m">我是flex三列时中间超长的那部分bbbbbbbbbbbmmmmmmmaaaaaaa</div>
            <div class="flex-r">bbbbbbbbbbbbbaaaaaaaaa</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .align-play {
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    .section-one {
      .grid-content {
        background-color: $--light-green-bg;
      }
      .title {
        padding: 10px;
      }
      .case-cont {
        position: relative;
        height: 200px;
        border: 1px solid $--border-color;
      }
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .demo1 {
        position: absolute;
        width: 100px;
        height: 50px;
        background-color: #096;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -25px;
      }
      .demo2 {
        position: absolute;
        background-color: #096;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .demo3-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .demo3 {
        background-color: #096;
      }
      .demo4-wrap {
        text-align: center;
      }
      .demo4 {
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: #096;
      }
      .demo4 + .demo4 {
        margin-left: 10px;
      }
      .cards-wrap {
        text-align: center;
        line-height: 200px;
      }
      .card-item {
        padding: 20px;
        display: inline-block;
        width: 220px;
        height: 100px;
        background-color: #fff;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
        vertical-align: middle;
        text-align: left;
        box-sizing: border-box;
        line-height: 1;
        .card-title-img {
          vertical-align: middle;
        }
        .card-title-label {
          display: inline-block;
          margin-left: 10px;
          vertical-align: middle;
          font-weight: 600;
        }
        .card-text {
          margin-top: 10px;
          color: $--secondary-text;
        }
      }
      .card-item + .card-item {
        margin-left: 10px;
      }
    }
    .section-two {
      .grid-content {
        height: 100px;
        background-color: $--light-green-bg;
      }
      .flex-box {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .flex-box2 {
        display: flex;
        height: 100px;
        .flex-left {
          width: 200px;
          background-color: #096;
        }
        .flex-right {
          flex: 1;
          background-color: #09f;
        }
      }
      .flex-box3 {
        display: flex;
        height: 100px;
        .flex-l {
          width: 200px;
          background-color: #096;
        }
        .flex-m {
          flex: 1;
          background-color: #09f;
        }
        .flex-r {
          flex: 1;
          background-color: #f60;
        }
      }
      .flex-box4 {
        display: flex;
        height: 100px;
        .flex-l {
          width: 200px;
          background-color: #096;
        }
        .flex-m {
          width: 200px;
          background-color: #09f;
        }
        .flex-r {
          flex: 1;
          background-color: #f60;
        }
      }
      .flex-box5 {
        display: flex;
        height: 100px;
        .flex-l {
          width: 200px;
          background-color: #096;
          overflow: scroll;
        }
        .flex-m {
          width: 200px;
          background-color: #09f;
        }
        .flex-r {
          flex: 1;
          background-color: #f60;
        }
      }
      .flex-box6 {
        display: flex;
        height: 100px;
        .flex-l {
          width: 200px;
          background-color: #096;
        }
        .flex-m {
          width: 200px;
          background-color: #09f;
        }
        .flex-r {
          width: 200px;
          background-color: #f60;
        }
      }
      .flex-box7 {
        display: flex;
        height: 100px;
        .flex-l {
          width: 200px;
          background-color: #096;
        }
        .flex-m {
          width: 200px;
          background-color: #09f;
        }
        .flex-r {
          width: 200px;
          background-color: #f60;
          overflow: hidden;
        }
      }
      .flex-box8 {
        display: flex;
        height: 100px;
        .flex-l {
          flex-grow: 0;
          flex-shrink: 0;
          width: 200px;
          background-color: #096;
        }
        .flex-m {
          flex-grow: 0;
          flex-shrink: 0;
          width: 200px;
          background-color: #09f;
        }
        .flex-r {
          flex-grow: 0;
          flex-shrink: 0;
          flex-basis: 200px;
          background-color: #f60;
        }
      }
      .flex-box9 {
        height: 100px;
        .flex-l {
          display: inline-block;
          vertical-align: top;
          width: 200px;
          background-color: #096;
        }
        .flex-m {
          display: inline-block;
          vertical-align: top;
          width: 200px;
          background-color: #09f;
        }
        .flex-r {
          display: inline-block;
          vertical-align: top;
          width: 200px;
          background-color: #f60;
        }
      }
    }
  }
</style>